<template>
  <div class="infowrap setwrap scrolldiv">
    <div class="titlecommon">
      <span class="goback" @click="goBack">
        农场信息
      </span>
      /<span class="grayspan">种植地块</span>
    </div>
    <div class="panwrap">
      <div class="leftcon">
        <div class="panelben panelben2">
          <div class="titlecommon2">
            <span> 地块信息 </span>
            <div class="btnc btnc6" @click="addPlant" v-if="userRole == 'admin-farmer'&&plotDetail.value.allowed==1">
              <el-icon><CirclePlus /></el-icon>
              添加种植
            </div>
            <div class="btnc btnc6 btnc66" @click="overPlant" v-if="userRole == 'admin-farmer'&&plotDetail.value.allowed==0">
              <el-icon><Delete /></el-icon>
              结束种植
            </div>
          </div>
          <div class="content2">
            <!-- <img src="@/assets/img/fm.png" class="fmpic" alt="" /> -->
            <div class="fmpic">
              <mapView :data="plotDetail.value" ref="mapRef" />
              <div class="btnmap">
                <div class="child" @click="reDraw">
                  编辑
                </div>
                <div class="child child2" @click="delThis()">
                  删除
                </div>
              </div>
            </div>
            <div class="cri">
              <div class="name">{{ plotDetail.value.plotName }}</div>
              <div class="flexone">
                <!-- <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">种植面积:</span>
                  {{plotDetail.value.plotArea}}亩
                </div> -->
                <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">地块面积:</span>
                  {{plotDetail.value.plotArea}}亩
                </div>
              </div> 
              
              <div class="flexone">
                <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">地址:</span>
                  {{ plotDetail.value.address?plotDetail.value.address:'-' }}
                </div>
              </div>
              <div class="flexone" v-if="plotDetail.value.plantingInfoPropList.length>0">
                <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">种植品种:</span>
                  <span v-if="plotDetail.value.plantingInfoPropList.length==0">
                    -
                  </span>
                  <span v-else>
                    {{plotDetail.value.plantingInfoPropList[0]['cropsSubclassName']  }}
                  </span>
                </div>
              </div>
              <div class="flexone" v-else>
                <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">种植品种:</span>
                   暂未种植
                </div>
              </div>
              <div class="flexone"  v-if="plotDetail.value.plantingInfoPropList.length>0">
                <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">种植时间:</span>
                  {{ plotDetail.value.plantingInfoPropList[0]['sowDatetime']?plotDetail.value.plantingInfoPropList[0]['sowDatetime']:'-' }}
                </div>
              </div>
              <div class="flexone"  v-if="plotDetail.value.plantingInfoPropList.length>0">
                <div class="flexchild">
                  <img src="@/assets/img/m1.png" class="m1" alt="" />
                  <span class="kl">种植密度:</span>
                  {{ plotDetail.value.plantingInfoPropList[0]['density']?plotDetail.value.plantingInfoPropList[0]['density']+' 株/亩':'-' }}
                </div>
              </div>
              <!-- <el-table :data="plotDetail.value.plantingInfoPropList" style="width: 100%">
                <el-table-column prop="name" label="种植类型" />
                <el-table-column prop="jd" label="种植品种" />
                <el-table-column prop="wd" label="种植数量(株)" />
                <el-table-column prop="lwmc" label="种植时间" />
                <el-table-column prop="lwmc1" label="种植面积(亩)" />
                <el-table-column prop="lwmc2" label="生长天数(天)" />
              </el-table> -->
            </div>
          </div>
        </div>
        <div class="panelben panelben2">
          <div class="titlecommon2">
            <span> 气象监测 </span>
            <div class="flexcenter">
              <div class="dateDrop dateDrop2">
                <el-select
                @change="changeMet"
                v-model="metDevice" 
                class="m-2"
                placeholder="请选择设备"
                size="default"
              >
                <el-option
                  v-for="item in metOption.value"
                  :key="item.id"
                  :label="item.deviceName"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="dateDrop">
                  <el-select
                  @change="changeMetyear"
                  v-model="metYear" 
                  class="m-2" 
                  placeholder="请选择日期"
                  size="default"
                >
                  <el-option
                    v-for="item in nowyear.value"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
              </el-select>
            </div>
            </div>
           
          </div>
          <div class="wddiv" v-if="!metOptionNoDataFlag">
            <div class="wdchild" v-for="(item, index) in wdArr.value" :key="index">
              <div class="text">
                {{ item.name }}
              </div>
              <div class="bdiv">
                <img :src="item.pic" class="apic" alt="" />
                <span class="bspan">{{ item.num }}</span>
              </div>
            </div>
          </div>
          <div class="tab" v-if="!metOptionNoDataFlag">
            <div
              @click="mettabClick(index)"
              :class="[
                activeIndex == index ? 'tabchildActive' : '',
                'tabchild',
              ]"
              v-for="(item, index) in metShow"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="line" v-if="!metOptionNoDataFlag">
            <linechart 
              :date="metChartDate.value"
              :dataLast="metChartDataLast.value"
              :dataNow="metChartDataNow.value"
              :unit="unitSet"
            />
          </div>
          <div class="nodata" v-if="metOptionNoDataFlag">
            暂无设备
          </div>
        </div>
        <div class="panelben panelben2">
          <div class="titlecommon2">
            <span> 土壤墒情监测 </span>
            <div class="flexcenter">
              <div class="dateDrop dateDrop2">
                <el-select
                @change="changeMois"
                v-model="moisDevice" 
                class="m-2"
                placeholder="请选择设备"
                size="default"
              >
                <el-option
                  v-for="item in moisOption.value"
                  :key="item.id"
                  :label="item.deviceName"
                  :value="item.id"
                />
              </el-select>
              </div>
              <div class="dateDrop dateDrop2">
                <el-select
                @change="changeMoisSd"
                v-model="moisSd" 
                class="m-2"
                placeholder="请选择距离"
                size="default"
              >
                <el-option
                  v-for="item in moisOptionSd.value"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              </div>
            <div class="dateDrop">
                  <el-select
                  @change="changeMoisyear"
                  v-model="moisYear" 
                  class="m-2" 
                  placeholder="请选择日期"
                  size="default"
                >
                  <el-option
                    v-for="item in nowyear.value"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
              </el-select>
            </div>
            </div>
          </div>
          <div class="wddiv2" v-if="!moisOptionNoDataFlag">
            <div class="wdnew wddiv">
              <div class="wdchild" v-for="(item, index) in wdArr2.value" :key="index">
              <div class="text">
                {{ item.name }}
              </div>
              <div class="bdiv">
                <img :src="item.pic" class="apic" alt="" />
                <span class="bspan">{{ item.num }}</span>
              </div>
            </div>
            </div>
          </div>
          <div class="tab" v-if="!moisOptionNoDataFlag">
            <div
              @click="moistabClick(index)"
              :class="[
                activeIndex2 == index ? 'tabchildActive' : '',
                'tabchild',
              ]"
              v-for="(item, index) in moisShow"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="line" v-if="!moisOptionNoDataFlag">
            <linechart 
            :date="moisChartDate.value"
            :dataLast="moisChartDataLast.value"
            :dataNow="moisChartDataNow.value"
            :unit="unitSet2"
            />
          </div>
          <div class="nodata" v-if="moisOptionNoDataFlag">
            暂无设备
          </div>
        </div>
        <div class="panfather">
          <div class="panelben panelben2">
          <div class="titlecommon2">
            <span> 虫情监测 </span>
            <div class="flexcenter">
              <div class="dateDrop dateDrop2">
                <el-select
                  @change="changeInsect"
                  v-model="insectDevice" 
                  class="m-2" 
                  placeholder="请选择设备"
                  size="default"
                >
                  <el-option
                    v-for="item in insectOption.value"
                    :key="item.id"
                    :label="item.deviceName"
                    :value="item.id"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="rightpanel">
            <div class="leftp">
              <!-- <div class="totaltext">种植总面积</div>
              <div class="mu">
                <span class="bignum">98.107</span>
                亩
              </div> -->
            </div>
            <div class="addpanel" v-if="nowInsectInfo">
              <div class="addcc">
                <span class="addspan2">设备名称:</span>
                {{nowInsectInfo.deviceName}}
              </div>
              <div class="addcc">
                <span class="addspan2">设备ID:</span>
                {{ nowInsectInfo.serialNumber }}
              </div>
              <div class="addcc">
                <span class="addspan2">在线状态:</span>
               {{ nowInsectInfo.status==1?'在线':'离线' }}
              </div>
              <div class="addcc">
                <span class="addspan2">最新上报时间:</span>
                {{nowInsectInfo.reportTime}}
              </div>
              <div class="addcc addcc2">
                <span class="addspan2">地址:</span>
                {{ nowInsectInfo.addr }}
              </div>
              <div class="btnwrap">
                <el-button @click="lookPic(1)" type="primary">查看图片</el-button>
              </div>
              <div class="warmpie" id="warmpie"></div>
              
              
            </div>
            <div class="addpanel" v-else>
              暂无数据
            </div>
            <!-- <div class="centerp">
              <pieChartS />
            </div> -->
            <div class="rightp">
              <div class="rchild" v-for="(item, index) in pieArr" :key="index">
                <div
                  class="color"
                  :style="{ background: colorArr[index] }"
                ></div>
                <div class="name">
                  {{ item.name }}
                </div>
                <div class="rtext1">
                  {{ item.num }}
                  <span class="small">亩</span>
                </div>
                <div class="rp">{{ item.pernum }}%</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panelben panelben2">
          <div class="titlecommon2">
            <span> 孢子监测 </span>
            <div class="flexcenter">
              <div class="dateDrop dateDrop2">
                <el-select
                  @change="changeBz"
                  v-model="bzDevice"  
                  class="m-2" 
                  placeholder="请选择设备"
                  size="default"
                >
                  <el-option
                    v-for="item in bzOption.value"
                    :key="item.id"
                    :label="item.deviceName"
                    :value="item.id"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="rightpanel">
            <div class="leftp">
              <!-- <div class="totaltext">种植总面积</div>
              <div class="mu">
                <span class="bignum">98.107</span>
                亩
              </div> -->
            </div>
            <div class="addpanel" v-if="nowbzInfo">
              <div class="addcc">
                <span class="addspan2">设备名称:</span>
                {{nowbzInfo.deviceName}}
              </div>
              <div class="addcc">
                <span class="addspan2">设备ID:</span>
                {{ nowbzInfo.serialNumber }}
              </div>
              <div class="addcc">
                <span class="addspan2">在线状态:</span>
               {{ nowbzInfo.status==1?'在线':'离线' }}
              </div>
              <div class="addcc">
                <span class="addspan2">最新上报时间:</span>
                {{nowbzInfo.reportTime}}
              </div>
              <div class="addcc addcc2">
                <span class="addspan2">地址:</span>
                {{ nowbzInfo.addr }}
              </div>
              <div class="btnwrap">
                <el-button @click="lookPic(2)" type="primary">查看图片</el-button>
              </div>
            </div>
            <div class="addpanel" v-else>
              暂无数据
            </div>
            <!-- <div class="centerp">
              <pieChartS />
            </div> -->
            <div class="rightp">
              <div class="rchild" v-for="(item, index) in pieArr" :key="index">
                <div
                  class="color"
                  :style="{ background: colorArr[index] }"
                ></div>
                <div class="name">
                  {{ item.name }}
                </div>
                <div class="rtext1">
                  {{ item.num }}
                  <span class="small">亩</span>
                </div>
                <div class="rp">{{ item.pernum }}%</div>
              </div>
            </div>
          </div>
        </div>
        </div>
        
        <div class="panelben panelben2">
          <div class="titlecommon2">
            <span> 生长状态 </span>
            <!-- <div class="flexcenter">
              <div class="btnc btnc8">
                <img src="@/assets/img/yg.png" class="samlliconset" alt="" />
                遥感影像
              </div>
              <div class="btnc btnc9">
                <img src="@/assets/img/wrj.png" class="samlliconset" alt="" />
                无人机巡检
              </div>
            </div> -->
            
          </div>
          <div class="ygwrap">
            <div class="titleyg">
              遥感影像
            </div>
            <div class="ygscroll videowrap videowrap2 scrolldiv" v-if="ygList.value.length>0">
              <div class="videoc videoc2" v-for="(item, index) in ygList.value" :key="index">
                
                <img @click="lookYg(index)" :src="'https://iqq.etkqq.gov.cn/api-farm-base'+item.img" class="fm" alt="" />
                <div class="videoinfo">
                  <span class="vname" v-if="item.time">{{ moment(item.time*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                  
                </div>
              </div>
            </div>
            <div class="nodata" v-else>
              暂无数据
            </div>
          </div>
          <div class="ygwrap">
            <div class="titleyg">
              长势监测仪
            </div>
            <div class="ygscroll videowrap videowrap2 scrolldiv" v-if="growList.value.length>0">
              <div class="videoc videoc2" v-for="(item, index) in growList.value" :key="index">
                
                <img @click="lookYg2(index)" :src="item.data['image']" class="fm" alt="" />
                <div class="videoinfo">
                  <span class="vname">{{ moment(item.created_at*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                  
                </div>
              </div>
            </div>
            <div class="nodata">
              暂无数据
            </div>
          </div>
          <div class="ygwrap">
            <div class="titleyg">
              无人机巡检
            </div>
            <div class="nodata">
              暂无数据
            </div>
            <!-- <div class="ygscroll videowrap videowrap2">
              <div class="videoc videoc2" v-for="(item, index) in 3" :key="index">
                <img src="@/assets/img/xj.png" class="fm" alt="" />
                <div class="videoinfo">
                  <span class="vname">2023.01.01</span>
                  
                </div>
              </div>
            </div> -->
          </div>
        </div>  
      </div>
      <div class="rightcon">
        <div class="panelben">
          <div class="titlecommon2">
            <span>土壤肥力</span>
            <div class="btnc btnc7">生产变量处方图</div>
          </div>
          <div class="tabnew">
            <el-table :data="tableData2" style="width: 100%">
              <el-table-column prop="name" label="点位" />
              <el-table-column prop="jd" label="全部(g/kg)" />
              <el-table-column prop="wd" label="水溶性氮（mg/kg）" />
              <el-table-column prop="lwmc" label="有效磷（mg/kg）" />
              <el-table-column prop="lwmc1" label="速效钾（mg/kg）" />
              <el-table-column prop="lwmc2" label="PH" />
            </el-table>
          </div>
        </div>
        <div class="panelben">
          <div class="titlecommon2">
            <span class="flexspan">
              监控图传
              <!-- <div v-if="camOption.value.length>0" :class="[camStatus==1?'commonStatus1':'commonStatus2','commonStatus']">
                <div class="status status1" v-if="camStatus==1">
                  在线 
                </div>
                <div class="status" v-if="camStatus==0">
                  离线
                </div>
              </div> -->
            </span>
            <el-select
                v-if="camOption.value.length>0"
                @change="changeCam"
                v-model="camDevice" 
                class="m-2"
                placeholder="请选择设备"
                size="default"
              >
                <el-option
                  v-for="item in camOption.value"
                  :key="item.id"
                  :label="item.deviceName"
                  :value="item.id"
                />
            </el-select>
          </div>
          <div class="videowrap videowrap5" id="videowrap" :style="{height:videoheightset+'px'}">
            <div id="video-container" class="videocontent"></div>
            <div class="videoc videoc2 videoc24" @click="initVideo" v-if="camOption.value.length==0&&setGetInitFlag">
              
              <div class="nofm" v-if="!videoFm">
                暂无设备
              </div>
            
            </div>
            <div class="videoc videoc2 videoc24" @click="initVideo" v-if="fmFlag&&camOption.value.length>0">
              <img src="@/assets/img/wp.png" v-if="videoReady" class="play abcenter" alt="" />
              <div class="nofm" v-if="!videoFm">
                <img src="@/assets/img/videobg.png" class="videobgpic" alt="">
                <span class="spanbg" v-if="camStatus==1">
                  {{!videoReady?'监控加载中……':''}}
                </span> 
                <span class="spanbg" v-if="camStatus==0">
                  设备离线
                </span> 
               
              </div>
              <img v-else :src="videoFm" class="fm" alt="" />
              <div class="videoinfo videoinfo5">
                <div class="vl">
                  <span class="vname">
                    {{ camName?camName:'暂无设备' }}
                  </span>
                  <div class="status status1" v-if="camStatus==1">
                     在线 
                  </div>
                  <div class="status status2" v-if="camStatus==0">
                     离线
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="panelben">
          <div class="titlecommon2">
            <span> 农事作业记录 </span>
            <div class="btnc btnc8" @click="openFarm" v-if="userRole == 'admin-farmer'">
              <img src="@/assets/img/cz.png" class="samlliconset" alt="" />
              农事操作
            </div>
          </div>
          <div class="graypanel" v-for="(item, index) in farmList.value" :key="index">
            <div class="gone pb">
              <div class="handlediv">
                <div class="glabel">作业时间:</div>
                <div class="timeadd1">
                  {{ item.startTime }} - {{ item.endTime }}  
                </div>
              </div>
              <el-button type="danger" v-if="userRole == 'admin-farmer'" @click="deleteOne(item)">删除</el-button>
            </div>
            <div class="gtwo pb">
              <div class="gtwoc">
                <div class="glabel">作业内容:</div>
                {{item.content}}
              </div>
            </div>
            <div class="gtwo pb" v-if="item.content=='收割'">
              <div class="gtwoc">
                <div class="glabel">收割数量:</div>
                {{item.collectCount?item.collectCount+'KG':'-'}}
              </div>
            </div>
            <div class="gthree pb" v-if="item.content!='收割'">
              <div class="glabel">农资成本:
                <span class="addspan" v-if="item.materialDetails&&item.materialDetails.length==0">
                  -
                </span>
              </div>
              <div class="pb" v-if="item.materialDetails&&item.materialDetails.length>0">
                <el-table :data="item.materialDetails" style="width: 100%">
                  <el-table-column prop="categoryName" label="农资类型" />
                  <el-table-column prop="name" label="农资名称" />
                  <el-table-column prop="dosage" label="农资用量" />
                  
                  <el-table-column prop="totalCost" label="农资花费(元)" />
                </el-table>
              </div>
            </div>
            <div class="gthree pb">
              <div class="glabel">人天数:
                <span class="addspan">{{ item.humanUse?item.humanUse:'-' }}</span>
              </div>
            </div>
            <div class="gthree pb">
              <div class="glabel">人工总费用:
                <span class="addspan">{{ item.humanCost?item.humanCost:'-' }}</span>
              </div>
            </div>
            <div class="gthree pb">
              <div class="glabel">备注:
                <span class="addspan">{{ item.comment?item.comment:'-'}}</span>
              </div>
            </div>
            <div class="gthree" v-if="item.picUrls">
              <div class="glabel pb pbadd">
                <span class="spanpdd">现场照片:
                </span>
              </div>
              <div class="picwrap" v-if="item.picUrls&&item.picUrls.length>0">
                <img
                  @click="lookYg4(item.picUrls,index)"
                  class="xcpic"
                  v-for="(item2, index) in item.picUrls"
                  :key="index"
                  :src="baseUrl+item2"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="fy">
            <div class="total flexcenter">
              共 <span>{{ total }}</span>项数据
            </div>
            <el-pagination background
              :currentPage="pageNum"
              @current-change="currentChange"
              :page-size="3"
            layout="prev, pager, next" :total="total" />
        </div>
        </div>
        <div class="panelben panelben2">
          <div class="titlecommon2">
            <span>历史种植</span>
            <!-- <div class="choosedate">
              <span>2023</span>
              <el-icon><ArrowDown /></el-icon>
            </div> -->
          </div>
          <div>
                <el-table :data="plantHistory.value" style="width: 100%">
                  <el-table-column prop="sowDatetime" label="种植时间" />
                  <el-table-column prop="categoryName" label="种植类型" />
                  <el-table-column prop="cropsSubclassName" label="种植品种" />
                  <el-table-column prop="density" label="种植密度(株/亩)" />
                  <el-table-column prop="area" label="种植面积(亩)" />
                  <el-table-column prop="lwmc4" label="详情" >
                    <template #default="scope">
                      <el-tooltip
                        :content="
                          '灌溉方式:'+
                          scope.row.irrigMethod+';'+
                          '是否覆膜:'+scope.row.irrigMethod+';'+
                          '种植行距:'+scope.row.line+';'+
                          '品种特性:'+scope.row.characteristic+';'+
                          '栽培模式:'+scope.row.culPattern+';'+
                          '种植用途:'+scope.row.use+';'
                        "
                        popper-class="box-itemdiy"
                        placement="top"
                      >
                        <span class="btntext">
                          查看
                        </span>
                      </el-tooltip>
                    </template>
                    
                  </el-table-column>
                </el-table>
                <div class="fy">
                  <div class="total flexcenter">
                    共 <span>{{ plantPageInfo.value.total }}</span
                    >项数据
                  </div>
                  <el-pagination
                    :currentPage="plantPageInfo.value.pageNum"
                    @current-change="currentChangeFarm"
                    background
                    layout="prev, pager, next"
                    :total="plantPageInfo.value.total"
                  />
                </div>
          </div>
        </div>  
      </div>
    </div>
    <farm ref="farm"
      :option="plotOptionList.value"
      :farmResourceCateOption="farmResourceCateOption.value"
      
    />
    <addplant @updatePlant="updatePlant" ref="addplantRef" />
    <quandi @updateEdit="updateEdit" :editInfo="editInfo" ref="quandi" />
    <pic ref="pic"/>
  </div>
</template>
  
<script lang="ts">
import quandi from "./modal/quandi.vue";
import mapView from "@/components/mapContainer/index3.vue";
import { post, get, deletePost } from "@/public/request/api";
import { defineComponent, ref, reactive, onMounted, onUnmounted,onBeforeUnmount } from "vue";
import linechart from "@/chart/pieChart/line2";
import pic from './modal/pic.vue'
import farm from './modal/farm.vue'
import { useRouter } from 'vue-router';
import addplant from '../plantingType/modal/addPlantType.vue'
import { ElMessageBox } from "element-plus";
import { ElMessage } from "element-plus";
import moment from "moment";
import * as echarts from 'echarts';
import EZUIKit from "ezuikit-js";
import storage from "@/store";
import Setting from "@/public/config"
import {
  previewThemeData,
} from "../../components/_util/video.config";
import { preview } from 'vue3-preview-image'
export default defineComponent({
  components: {
    linechart,
    pic,
    farm,
    addplant,
    mapView,
    quandi
  },
  setup() {
    //变量
    let baseUrl=Setting.HttpApiAddress
    const userRole = storage.state.userRole;
    let playr=ref(null)
    let videoInfo=reactive({
      value:{
        token:'',
        status:'',
        url:''
      }
      
    })
    let farmResourceCateOption = reactive({
      value: [],
    });
    const value = ref("");
    const router = useRouter()
    let plotDetail=reactive({
      value:{
        abnormalDeviceCount:null,
        address:null,
        allowed:null,
        blockInodeList:null,
        deviceCount:null,
        id:null,
        inodeList:null,
        lat :null,
        lon:null,
        onLineDeviceCount:null,
        plotArea:null,
        plotGroupId: null,
        plotGroupName: null,
        plotName:null,
        sign: null,
        plantingInfoPropList:[],
        plantingInfoPropListGet:[]
      }
      
    }) 
    plotDetail.value= JSON.parse(sessionStorage.getItem('plotDetail'))
    console.log('plotDetail',plotDetail);
    let plotOptionList=reactive({
      value:[
        {
          plotName:router.currentRoute['_value']['query']['name'],
          id:router.currentRoute['_value']['query']['id']
        }
      ]
    })
    let metYear=ref(null)
    let moisYear=ref(null)
    let moisDevice=ref(null)
    const colorArr = [
      "rgba(20, 204, 131, 1)",
      "rgba(49, 193, 245, 1)",
      "rgba(46, 88, 229, 1)",
      "rgba(229, 138, 46, 1)",
      "rgba(229, 92, 46, 1)",
    ];
    let videoFm=ref('')
    let camDevice=ref(null)
    const pieArr = []
    // const pieArr = [
    //   {
    //     name: "虫子",
    //     num: 2355,
    //     pernum: 30,
    //   },
    // ];
    const options = [
      {
        value: "1",
        label: "地块01",
      },
    ];
    const tableData4 = [
      {
        name: "种子",
        jd: "裕丰303",
        wd: "3",
        lwmc: "203",
        lwmc1: "23",
      },
    ];
    let videoReady=ref(false)
    let insectDevice=ref(null)
    let bzDevice=ref(null)
    let nowbzInfo=ref(null)
    
    let moisOptionSd=reactive({
      value:[
        {
          name:'地下10cm',
          value:10
        },
        {
          name:'地下20cm',
          value:20
        },
        {
          name:'地下30cm',
          value:30
        },
      ]
    })
    const tableData5 = []
    // const tableData5 = [
    //   {
    //     name: "2023.05.01",
    //     jd: "2023.05.01",
    //     wd: "玉米",
    //     lwmc: "裕丰303",
    //     lwmc1: "23",
    //     lwmc2: "55000",
    //     lwmc3: "230",
    //     lwmc4: "23",
    //   },
    // ];
    let plantHistory=reactive({
      value:[]
    })
    let nowyear=reactive({
      value:[]
    })
    let bzOption=reactive({
      value:[]
    })
    let moisOptionNoDataFlag=ref(false)
    let metOptionNoDataFlag=ref(false)
    let nowInsectInfo=ref(null)
    let videoheightset=ref(420)
    const activeIndex = ref(0);
    let metChartDate=reactive({
      value:[]
    }) 
    let metChartDataLast=reactive({
      value:[]
    })
    let metChartDataNow=reactive({
      value:[]
    })
    let moisChartDate=reactive({
      value:[]
    }) 
    let moisChartDataLast=reactive({
      value:[]
    })
    let ygList=reactive({
      value:[]
    })
    let fmFlag=ref(true)
    let moisChartDataNow=reactive({
      value:[]
    })
    let setGetInitFlag=ref(false)
    let wdArr = reactive({
      value:[]
    })
    let wdArr2 = reactive({
      value:[]
    })
    const tableData2 = []
    let growList=reactive({
      value:[]
    })
    let pieNewOption=reactive({
      value:{
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          textStyle:{//图例文字的样式
            color:'#fff',
            
          }
        },
        series: [
          {
            
            type: 'pie',
            radius: '70%',
            data: [
              { value: 8, name: '短额负蝗' },
              { value: 3, name: '蝼蛄' },
             
            ],
            label:{
            normal:{
              show:false
            },
          },
          labelLine:{
            normal:{
              show:false
            }
        },
            
          }
        ]
      }
    })
    // const tableData2 = [
    
    //   {
    //     name: "01",
    //     jd: "1.08",
    //     wd: "90.3",
    //     lwmc: "84.23",
    //     lwmc1: "193",
    //     lwmc2: "743",
    //   },
    //   {
    //     name: "01",
    //     jd: "1.08",
    //     wd: "90.3",
    //     lwmc: "84.23",
    //     lwmc1: "193",
    //     lwmc2: "743",
    //   },
    // ];
    const menu = [
      {
        name: "地块数量(块)",
        pic: require("@/assets/img/c1.png"),
        num: 4,
      },
      {
        name: "地块面积(亩)",
        pic: require("@/assets/img/c2.png"),
        num: 4,
      },
      {
        name: "当前种植面积(亩)",
        pic: require("@/assets/img/c3.png"),
        num: 4,
      },
      {
        name: "种植地占比(%)",
        pic: require("@/assets/img/c4.png"),
        num: 4,
      },
      {
        name: "当前种植品种(种)",
        pic: require("@/assets/img/c5.png"),
        num: 4,
      },
    ];
    let plantPageInfo=reactive({
      value:{
        pageSize:5,
        pageNum:1,
        total:0,
      }
      
    })
    let insectOption=reactive({
      value:[]
    })
    let moisSd=ref(null)
    let farmList=reactive({
      value:[]
    })
    let pageInfo={
      pageNum:1,
      pageSize:10
    }
    let pageNum=ref(1)
    let realPlotList=reactive({
      value:[]
    })
    let activeIndex2=ref(0)
    let total=ref(0)
    const mapRef = ref();
    let unitSet=ref('')
    let unitSet2=ref('')
    const areaArr = [
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
      {
        name: "地块01",
        pic1: require("@/assets/img/c5.png"),
        pic2: require("@/assets/img/c5.png"),
      },
    ];
    let metShow=[
      {
        name:'温度',
        key:'temp',
        unit:'℃'
      },
      {
        name:'湿度',
        key:'hum',
        unit:'%RH'
      },
      {
        name:'风速',
        key:'windSpeed',
        unit:'m/s'
      },
      {
        name:'降雨量',
        key:'temp',
        unit:'mm'
      },
      {
        name:'光照',
        key:'lux',
        unit:'lux'
      },
      {
        name:'辐射',
        key:'rad',
        unit:'W/㎡'
      },
    ]
    let moisShow=[
      {
        name:'EC',
        key:'ec',
        unit:'us/cm'
      },
      {
        name:'土温',
        key:'temp',
        unit:'℃'
      },
      {
        name:'土湿',
        key:'hum',
        unit:'%RH'
      },
      
    ]
   
    const addplantRef=ref(null)
    let editInfo={
      name:plotDetail.value.plotName,
      id:router.currentRoute['_value']['query']['id']
    }
    let metOption=reactive({
      value:[]
    })
    let metAllList=reactive({
      last:[],
      now:[]
    })
    let camName=ref('')
    let camStatus=ref(null)
    let moisAllList=reactive({
      last:[],
      now:[]
    })
    let metDevice=ref(null)
    let moisOption=reactive({
      value:[]
    }) 
    let camOption=reactive({
      value:[]
    })
    
    const pic=ref(null)
    function openFarm(){
      this.$refs.farm.dialogVisible=true
    }
    function goBack(){
      router.push({
        path: "/plantingType/dataStatistics",
      });
    }
    function addPlant(){
      addplantRef.value.dialogVisible=true
    }
    
    function lookPic(type){
      let id=type==1?insectDevice.value:bzDevice.value
      pic.value.lookPic(type,id)
    }
    function changeCam(e){
      fmFlag.value=true
      if(playr.value){
        playr.value.stop()
        playr.value = null;
        if( document.getElementById('video-container')){
          document.getElementById('video-container').innerHTML = "";
        }
      }
      camDevice=e
      let find2=camOption.value.find(item=>{
        return item.id==e
      })
      if(find2){
        camName.value=find2.deviceName
        videoFm.value=find2.cover
      }
      getSetNowInfo3(e)
    }
    function changeBz(e){
      nowbzInfo.value=e
      getWramInfo2(e)
    }
    function lookYg4(arr,index){
      let newlist=[]
      arr.forEach(item=>{
        newlist.push(
          baseUrl+item
        )
      })
      preview(index,newlist)
    }
    function lookYg2(index){
      let newlist=[]
      growList.value.forEach(item=>{
        newlist.push(
          item.data['image']
        )
      })
      preview(index,newlist)
    }
    function updatePlant(val){
     
      console.log('updatePlant',val);
      plotDetail.value.plantingInfoPropList.unshift({
        cropsSubclassName:val.name,
        sowDatetime:val.time,
        density:val.md
      })
    }
    function lookYg(index){
      let newlist=[]
      ygList.value.forEach(item=>{
        newlist.push(
          'https://iqq.etkqq.gov.cn/api-farm-base'+item.img
        )
      })
      preview(index,newlist)
    }
    function delThis(){
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          delSure()
        })
        .catch(() => {
          // catch error
        });
    }
    function overPlant(){
      get("/plant/finish", {
         plotId:router.currentRoute['_value']['query']['id'],
      }).then((res) => {
        ElMessage({
          message: "结束种植成功",
          type: "success",
        });
        plotDetail.value.allowed=1
        plotDetail.value.plantingInfoPropList=[]
      })
    }
    function mettabClick(index){
      activeIndex.value=index
      metSxShow()
    }
    function mettabClick2(index){
      activeIndex2.value=index
      moisSxShow()
    }
    function changeMoisSd(e){
      moisSd.value=e
      getmoisList()
      getSetNowInfo2(moisDevice.value)
    }
    function moistabClick(index){
      activeIndex2.value = index
      getmoisList()
    }
    function getSetNowInfo(id){
      get("/device/getCollectInfo", {
        id:id
      }).then((res) => {
        let getRzTime=0
        if(sessionStorage.getItem('nowWeatherData')){
          let get=JSON.parse(sessionStorage.getItem('nowWeatherData'))
          let get1=moment(get.sun_rise)
          let get2=moment(get.sun_down)
          getRzTime=get2.diff(get1, 'minute')
        }
        
       
        wdArr.value=[
          {
            name: "温度(℃)",
            pic: require("@/assets/img/b1.png"),
            num: res.data.data[2]['value'],
          },
          {
            name: "湿度(%RH)",
            pic: require("@/assets/img/bsd.png"),
            num: res.data.data[3]['value'],
          },
          {
            name: "光照(lux)",
            pic: require("@/assets/img/bgz.png"),
            num: res.data.data[6]['value'],
          },
          {
            name: "太阳辐射(W/m²)",
            pic: require("@/assets/img/addfs.png"),
            num: res.data.data[5]['value'],
          },
          {
            name: "降雨量(mm)",
            pic: require("@/assets/img/bjy.png"),
            num: res.data.data[4]['value'],
          },
          {
            name: "风速(m/s)",
            pic: require("@/assets/img/bfs.png"),
            num: res.data.data[0]['value'],
          },
          {
            name: "日照时长(min)",
            pic: require("@/assets/img/bgz.png"),
            num: getRzTime?getRzTime:'-',
          },
        ]
      })
       
      
    }
    
    function getSetNowInfo2(id){
      get("/device/getCollectInfo", {
        id:id
      }).then((res) => {
        let get=res.data.data
        let set=res.data.data.Level.find(item=>{
          return item.CM==moisSd.value
        })
        
        wdArr2.value=[
          {
            pic: require("@/assets/img/cc1.png"),
            num: set['Temp'],
            name:'土温℃'
          },
          {
            pic: require("@/assets/img/cc2.png"),
            num: set['Humidity'],
            name:'土湿%RH'
          },
          {
            pic: require("@/assets/img/bec.png"),
            num: set['EC'],
            name:'EC'
          },
        ]
      })
    }
    function getYgList(){
      get("/device/remoteSensingPoints", {
        plotId:router.currentRoute['_value']['query']['id'],
      }).then((res) => {
        if(res.data){
          res.data.reverse()
          ygList.value=res.data
          console.log('resssss',res)
        }
      })
    }
    function getSetNowInfo3(id){
      get("/device/getCollectInfo", {
        id:id
      }).then((res) => {
        console.log('ressssssssssss',res.data)
        console.log('resssssssssss2222s',res.data.data)
        if(res.data&&res.data.data&&res.data.data.url){
          console.log('xxxxxxxxxxxxxxxxxxxxx!')
          videoInfo.value.token=res.data.token
          videoInfo.value.url=res.data.data.url
          videoReady.value=true
          
        }
        camStatus.value=res.data.status
        
      })
    }
    function currentChangeFarm(e){
      plantPageInfo.value.pageNum=e
      getPlantHistroy()
    }
    function getPlantHistroy(){
      get("/plant/history", {
        plotId:router.currentRoute['_value']['query']['id'],
        pageSize:plantPageInfo.value.pageSize,
        pageNum:plantPageInfo.value.pageNum
      }).then((res) => {
        plantHistory.value=res.pageInfo.list
        plantPageInfo.value.total=res.pageInfo.total
      })
    }
    function getGrow(){
      get("/device/growPoints", {
        plotId:router.currentRoute['_value']['query']['id'],
      }).then((res) => {
        growList.value=res.data
        console.log('growList.value',growList.value)
      })
    }
    function getDeviceOption(){
      
      get("/device/options", {
        plotId:router.currentRoute['_value']['query']['id']
      }).then((res) => {
        let find=res.data.filter(item=>{
          return item.deviceType=='met'
        })
        let find2=res.data.filter(item=>{
          return item.deviceType=='mois'
        })
        let find3=res.data.filter(item=>{
          return item.deviceType=='cam'
        })
        let find4=res.data.filter(item=>{
          return item.deviceType=='insect'
        })
        let find5=res.data.filter(item=>{
          return item.deviceType=='spore'
        })
        metOption.value=find
        moisOption.value=find2
        if(moisOption.value.length==0){
          moisOptionNoDataFlag.value=true
        }
        if(metOption.value.length==0){
          metOptionNoDataFlag.value=true
        }
        camOption.value=find3
        insectOption.value=find4
        bzOption.value=find5
        console.log('metOption.value',metOption.value);
        if(camOption.value.length>0){
          camDevice.value=camOption.value[0]['id']
          camName.value=camOption.value[0]['deviceName']
          //camStatus.value=camOption.value[0]['status']
          videoFm.value=camOption.value[0]['cover']
          getSetNowInfo3(camOption.value[0]['id'])
        }
        setGetInitFlag.value=true
        if(metOption.value.length>0){
          metDevice.value=metOption.value[0]['id']
          getmetList()
          getSetNowInfo(metOption.value[0]['id'])
        }
        if(moisOption.value.length>0){
          moisDevice.value=moisOption.value[0]['id']
          getmoisList()
          getSetNowInfo2(moisOption.value[0]['id'])
        }
        if(insectOption.value.length>0){
          insectDevice.value=insectOption.value[0]['id']
          getWramInfo(insectOption.value[0]['id'])
        }
        if(bzOption.value.length>0){
          bzDevice.value=bzOption.value[0]['id']
          getWramInfo2(bzOption.value[0]['id'])
        }
        
       
      })
    }
    function getFarmResourceCategory() {
      get("/farmResource/category/options", {}).then((res) => {
        farmResourceCateOption.value = res.data;
      });
    }
    function getmetList(){
      get("/plot/meteorological", {
        date:metYear.value,
        deviceId:metDevice.value,
        id:router.currentRoute['_value']['query']['id']
      }).then((res) => {
        metAllList.last=res.data.lastYearList
        metAllList.now=res.data.nowYearList
        metSxShow()
      })
    }
    function getmoisList(){
      
      get("/plot/moisture", {
        date:moisYear.value,
        deviceId:moisDevice.value,
        id:router.currentRoute['_value']['query']['id'],
        cm:moisSd.value
      }).then((res) => {
        
        moisAllList.last=res.data.lastYearList
        moisAllList.now=res.data.nowYearList
        moisSxShow()
      })
    }
    function moisSxShow(){
      let get=moisShow[activeIndex2.value]['key']
      let dataset=[]
      if(moisAllList.now.length>moisAllList.last.length){
        dataset=moisAllList.now
      }else{
        dataset=moisAllList.last
      }
      moisChartDataNow.value=[]
      moisChartDataLast.value=[]
      moisChartDate.value=[]
      dataset.forEach(item=>{
        let time=item.monitorTime
        moisChartDate.value.push(time)
      })
      moisAllList.now.forEach((item,index)=>{
        moisChartDataNow.value.push(
          item[get]
        )
      })
      moisAllList.last.forEach((item,index)=>{
        moisChartDataLast.value.push(
          item[get]
        )
      })
      unitSet2.value=moisShow[activeIndex2.value]['unit']
    }
    function metSxShow(){
      let get=metShow[activeIndex.value]['key']
      let dataset=[]
      if(metAllList.now.length>metAllList.last.length){
        dataset=metAllList.now
      }else{
        dataset=metAllList.last
      }
      metChartDataNow.value=[]
      metChartDataLast.value=[]
      metChartDate.value=[]
      dataset.forEach(item=>{
        let time=item.createTime
        //moment(time).format('MM/DD')
        metChartDate.value.push(time)
      })
     
      metAllList.now.forEach((item,index)=>{
        metChartDataNow.value.push(
          item[get]
        )
        
      })
      metAllList.last.forEach((item,index)=>{
        metChartDataLast.value.push(
          item[get]
        )
      })
      unitSet.value=metShow[activeIndex.value]['unit']
      
      //metChartDate metChartDataLast metChartDataNow
    }
    function changeMois(e){
      moisDevice.value=e
      getmoisList()
      getSetNowInfo2(e)
    }
    function changeMoisyear(e){
      moisYear.value=e
      getmoisList()
    }
    function changeMet(e){
      metDevice.value=e
      getmetList()
      getSetNowInfo(e)
    }
    function changeMetyear(e){
      metYear.value=e
      getmetList()
    }
    function reDraw(){
      this.$refs.quandi.page = 1;
      this.$refs.quandi.dialogVisible = true;
    }
    function delSure(){
      let id=router.currentRoute['_value']['query']['id']
      let selectedYear=router.currentRoute['_value']['query']['year']
      deletePost("/plot/del", {
        id,
        selectedYear
      }).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        setTimeout(() => {
          router.go(-1)
        }, 1000);
      });
    }
    
    function currentChange(e){
      
      pageNum.value=e
      let s=(pageNum.value-1)*3
      let end=(pageNum.value)*3
      farmList.value=realPlotList.value.slice(s,end)
    }
    function getFarmList(){
      let id=router.currentRoute['_value']['query']['id']
      get("/farmOperation/list", {
        gardenId:id
      }).then((res) => {
        farmList.value=res.data.slice((pageNum.value-1)*3,3)
        realPlotList.value=JSON.parse(JSON.stringify(res.data))
        total.value=realPlotList.value.length
      });
    }
    function getWramInfo(id){
      get("/device/state?id="+id, {
        //id,
      }).then((res) => {
        nowInsectInfo.value=res.data
        setTimeout(() => {
          setPie()  
        }, 1000);
        
      });
    }
    function getWramInfo2(id){
      get("/device/state?id="+id, {
        //id,
      }).then((res) => {
        nowbzInfo.value=res.data
      });
    }
    function changeInsect(e){
      console.log(e);
      
      insectDevice.value=e
      getWramInfo(e)
    }
    function updateEdit(val){
      console.log('valedit',val);
      plotDetail.value.plotName=val.name
      plotDetail.value.plotArea=val.area
      plotDetail.value.address=val.address
      let get=JSON.parse(sessionStorage.getItem('plotDetail'))
      get.inodeList=val.plotInodeList
      get.blockInodeList=val.blockInodeList
      sessionStorage.setItem('plotDetail',JSON.stringify(get))
      mapRef.value.drawMap();
    }
    function setPie(){
      var chartDom = document.getElementById('warmpie');
      var myChart = echarts.init(chartDom);
      myChart.setOption(pieNewOption.value);
    }
    function  initVideo() {
      console.log('videoReady.value',videoReady.value)
      if(!videoReady.value){
        return
      }
      this.$nextTick(()=>{
        
        //setTimeout(() => {
          fmFlag.value=false
          let themeData = JSON.parse(JSON.stringify(previewThemeData));
          let height=document.getElementById('videowrap').clientHeight
          let width=document.getElementById('videowrap').clientWidth
          console.log('height',height);
          console.log('width',width);
          let options = {
              id: "video-container",
              accessToken: videoInfo.value.token,
              url: videoInfo.value.url,
              width,
              height,
              audio: 0,
              autoplay: true,
              themeData: themeData,
              handleSuccess: () => {
                // setTimeout(() => {
                //   this.player.enableZoom();
                // }, 1000);
              },
            // poster: this.baseUrl + this.nowimg,
            };
          playr.value= new EZUIKit.EZUIKitPlayer(options)  
        //}, 500);
        
      })
      
    }
    function deleteOne(item){
      console.log(item);
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          
          deleteSure(item)
        })
        .catch(() => {
          // catch error
        });
    }
    function deleteSure(item){
      deletePost("/farmOperation/del?id="+item.id, {

      }).then((res) => {
        getFarmList()
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      })
      
    }
    // 生命周期
    onMounted(() => {
      let width=document.getElementById('videowrap').clientWidth
      videoheightset.value=width*0.56
      getFarmList()
      getDeviceOption()
      getPlantHistroy()
      getYgList()
      getGrow()
      // initVideo({
      //   token:"at.6se8qfotabtp13uzb7ngqoxtapkqbwvq-2a4kxbtmjr-030f6yy-oaeszgt8i",
      //   url:'ezopen://open.ys7.com/AB8223970/1.hd.live'
      // })
      moisSd.value=10
      let nowyear2=moment().format('YYYY')
      for(let p=1;p<13;p++){
        if(p<10){
          nowyear.value.push(nowyear2+'-'+'0'+p)
        }else{
          nowyear.value.push(nowyear2+'-'+p)
        }
      
      }
      console.log(nowyear);
      metYear.value=moment().format('YYYY-MM')
      moisYear.value=moment().format('YYYY-MM')
      console.log('metyear',metYear);
      
      mapRef.value.init();
      
      getFarmResourceCategory()
      
    });

    onUnmounted(() => {
      
    });
    onBeforeUnmount(()=>{
      if(playr.value){
        playr.value.stop()
        playr.value = null;
        if( document.getElementById('video-container')){
          document.getElementById('video-container').innerHTML = "";
        }
        
      }
    })

    //methods

    // return
    return {
      updateEdit,
      updatePlant,
      overPlant,
      growList,
      getGrow,
      ygList,
      lookYg,
      getYgList,
      currentChangeFarm,
      plantPageInfo,
      deleteOne,
      lookPic,
      bzDevice,
      changeBz,
      nowbzInfo,
      bzOption,
      nowInsectInfo,
      changeInsect,
      insectDevice,
      insectOption,
      plantHistory,
      plotOptionList,
      setGetInitFlag,
      videoReady,
      videoheightset,
      initVideo,
      videoInfo,
      videoFm,
      lookYg4,
      camName,
      camStatus,
      changeCam,
      getSetNowInfo3,
      getSetNowInfo2,
      getSetNowInfo,
      camDevice,
      moistabClick,
      moisSd,
      moisChartDataNow,
      moisChartDataLast,
      moisChartDate,
      moisOptionSd,
      baseUrl,
      moisYear,
      moisDevice,
      changeMois,
      changeMoisyear,
      getmoisList,
      moisOptionNoDataFlag,
      metOptionNoDataFlag,
      metChartDate,
      metChartDataLast,
      metChartDataNow,
      moisShow,
      activeIndex2,
      mettabClick2,
      mettabClick,
      metShow,
      changeMetyear,
      metYear,
      nowyear,
      metDevice,
      changeMet,
      editInfo,
      reDraw,
      delThis,
      mapRef,
      pageNum,
      currentChange,
      realPlotList,
      total,
      lookYg2,
      farmList,
      addplantRef,
      pic,
      addPlant,
      goBack,
      colorArr,
      pieArr,
      menu,
      fmFlag,
      options,
      value,
      farmResourceCateOption,
      areaArr,
      changeMoisSd,
      tableData2,
      userRole,
      wdArr,
      unitSet,
      unitSet2,
      activeIndex,
      wdArr2,
      plotDetail,
      tableData4,
      tableData5,
      openFarm,
      moment,
      metOption,
      moisOption,
      camOption
    };
  },
});
</script>
  
  
<style lang="scss">
.box-itemdiy{
  max-width: 300px;
}
.pbadd{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  .spanpdd{
    margin-bottom: 20px;
    display: inline-block;
  }
}
.setwrap {
  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }
  .el-pagination.is-background .btn-next {
    background: none !important;
  }
  .btn-prev {
    background: none !important;
  }
}
.infowrap {
  .el-select .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
  }
}
.dateDrop{
  .el-select{
    width: 150px!important;
  }
}
</style>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.warmpie{
  width: 180px;
  height: 180px;
  margin: 0 auto;
}
.status2{
  background:rgba(		255,0,0,.16);
  color: rgba(		255,0,0,1);
}
.btnc66{
  background: red!important;
}
.panelben2{
   min-width: 325px;
}
.nodata{
  color: #909399;
  margin: 10px 0;
}
.btntext{
  color:rgb(49, 127, 245);
  cursor: pointer;
}
.panfather{
  display: flex;
  .btnwrap{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.addpanel{
  width: 100%;
  .addcc{
    margin-bottom: 5px;
  }
  .addcc2{
    margin-bottom: 10px;
  } 
}
.titlecommon2 .el-select{
  width: 150px!important;
}
.play{
  cursor: pointer;
  z-index: 13;
  position: absolute;
  right: 20px;
  bottom: 10px;
  width: 30px!important;
  height: 30px!important;
}
.videoinfo{
  z-index: 12;
}
.nofm{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  background: #000;
  color: #fff;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.videocontent {
  height: 100%;
  width: 100%;
  
  position: absolute;
  top: 0;
  left: 0;
}
.dateDrop2{
  margin-right: 10px;
}
.dateDrop{
  width: 150px;
}
.btnmap{
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  z-index: 20;
  .child{
    margin-left: 10px;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    background: rgb(9, 127, 229);
  }
  .child2{
    background: red!important;
    color: #fff;
  }
}
.fy{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .total{
      color: rgba(255, 255, 255, 0.60);
      font-size: 10px;
      span{
        font-size: 20px;
      }
    }
    
}
.addspan{
  color: #fff;
}
.videowrap5{
  border-radius: 30px!important;
}
.videowrap{
  border-radius: 10px;
  overflow: hidden;
  height: 420px;
  position: relative;
  min-width: 917px;
}

.videowrap2{
  margin-bottom: 20px;
  height: 180px!important;
  overflow-x: auto;
}
.goback{
  color: rgba(255, 255, 255, 0.30)!important;
  cursor: pointer;
}

.panwrap{
  align-items: flex-start!important;
  .leftcon,.rightcon{
    flex: 1;
  }
}

.graypanel {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  .picwrap {
    display: flex;
    .xcpic {
      height: 65px;
      width: 100px;
      cursor: pointer;
      border-radius: 10px;
      margin-right: 15px;
    }
  }
  .pb {
    margin-bottom: 20px;
  }
  .glabel {
    color: rgba(255, 255, 255, 0.6);
    margin-right: 5px;
  }
  .gone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .handlediv{
      align-items: center;
      display: flex;
      .timeadd1{
        position: relative;
        top: 2px;
      }
    }
  }
  .gtwo {
    display: flex;
    justify-content: space-between;
    .gtwoc {
      flex: 1;
      display: flex;
    }
  }
}
.topwarp {
  margin-top: 20px;
}
.tab {
  margin-bottom: 20px;
}
.linenewrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
  .lchild {
    display: flex;
    align-items: center;
  }
}
.wdnew {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.linenewrap {
  display: flex;
  .lchild {
    .fk {
      width: 17px;
      height: 8px;
      border-radius: 2px;
      margin-right: 10px;
      .fklabel {
        color: rgba(255, 255, 255, 1);
      }
    }
    .fk1 {
      background: rgba(245, 191, 49, 1);
    }
    .fk2 {
      background: rgba(49, 219, 245, 1);
    }
    .fk3 {
      background: rgba(49, 127, 245, 1);
    }
  }
}
.smallspan {
  font-size: 14px !important;
  font-weight: normal !important;
  margin-left: -2px !important;
}
.spanbg{
  position: relative;
  z-index: 13;
}
.videobgpic{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
}

.videoc2 {
  width: 32% !important;
  height: 100%!important;
  overflow: hidden;
  margin-right: 1%!important;
  cursor: pointer;
  flex-shrink: 0;
}
.videoc24{
  width: 100% !important;
  margin-right: 0%!important;
}
.commonStatus {
  margin-left: 10px;
}
.flexspan {
  display: flex;
  align-items: center;
}
.wddiv {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .text {
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10px;
  }
  .wdchild {
  }
  .apic {
    width: 32px;
  }
  .bspan {
    font-weight: bold;
    font-size: 28px;
    margin-left: 10px;
  }
  .bdiv {
    display: flex;
    align-items: center;
  }
}
.panelben {
  flex: 1;
  margin-bottom: 20px;
}
.btnc6 {
  width: 110px;
  font-size: 15px;
  margin: 0 !important;
}
.btnc7 {
  width: 140px;
  font-size: 15px;
  margin: 0 !important;
}
.btnc8 {
  width: 115px;
  font-size: 15px;
  margin: 0 !important;
}
.btnc9{
  width: 130px;
  font-size: 15px;
  margin-left: 10px!important;
  margin-top: 0!important;
  margin-bottom: 0!important;
}
.titlecommon2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.btnc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 20px;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: 5px;
  background: rgba(9, 127, 229, 1);
  cursor: pointer;
}
.icon2 {
  width: 14px;
  margin-right: 6px;
}
.grayspan {
  color: rgba(255, 255, 255, 0.6);
}
.infowrap {
  .content4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .cchild {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      padding: 20px;
      width: 24%;
      margin-top: 20px;
      margin-right: 10px;
      .big {
        font-size: 20px;
      }
      .p3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .p3child {
          width: 49%;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .p3label {
            color: rgba(255, 255, 255, 0.6);
          }
          .num {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
      .p2 {
        display: flex;
        justify-content: space-around;
        .text {
          margin-left: 15px;
        }
        .p2left {
          display: flex;
          align-items: center;
          .name {
            font-weight: bold;
          }
          .label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
          }
        }
        .zz {
          width: 60px;
          padding: 3px;
          background: #fff;
          border-radius: 300px;
        }
      }
      .p1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .pbtn {
          display: flex;
          align-items: center;
          .pbnt1 {
            background: rgba(9, 127, 229, 1);
            border-radius: 5px;
            font-size: 10px;
            padding: 2px 15px;
            box-sizing: border-box;
            cursor: pointer;
          }
          .pbnt2 {
            background: rgba(255, 255, 255, 0.16) !important;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .panelben3 {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;
    margin-bottom: 10px;
  }

  .content2 {
    display: flex;
    align-items: flex-start;

    margin-top: 20px;
    .name {
      margin-bottom: 10px;
    }
    .fmpic {
      width: 270px;
      margin-right: 20px;
      height: 175px;
      position: relative;
      flex-shrink: 0;
    }
    .flexone {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .flexchild {
        display: flex;
        align-items: center;
        // margin-right: 50px;
      }
      .kl {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        margin: 0 5px;
        flex-shrink: 0;
      }
    }
  }
  .cc {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 15px;
    border-radius: 10px;
    width: 19%;
    .cct2 {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      margin-top: 10px;
      align-items: center;
      .icon {
        width: 50px;
        margin-right: 12px;
      }
    }
  }
  .xcpic {
      width: 170px;
      border-radius: 10px;
      margin-right: 15px;
    }
}
</style>
  